﻿@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<script src="~/Scripts/PictureModel.js?a=1" type="text/javascript"></script>

<div class="form-search">
    <fieldset>
        <legend data-bind="text: title"></legend>
        <table width="100%">
            <tr>
                <td>
                <div class="well">
                    <span>
                        From Date:
                        <input type="text" class="span2" data-bind="datepicker: fromDate" data-date-format="yyyy-mm-dd" id="dpfrom">
                        To Date:
                        <input type="text" class="span2" data-bind="datepicker: toDate" data-date-format="yyyy-mm-dd" id="dpTo">
                        <a href="#" data-bind="click: search, visible: notSearching" class="btn btn-primary">Search</a>
                        <a href="#"  data-bind="click: showOrHideAdvancedFilter" class="btn btn-primary">Show Advanced Filter Options</a>
                        <img data-bind="visible: showSearching" src="~/Images/ajax-loader.gif" height="25px" width="25px" />
                    </span>
                    <table data-bind="visible: showAdvancedFilter">
                        <tr>
                            <td><br/></td>
                        </tr>
                        <tr>
                            <td><label class="control-label">Places:</label></td>
                            <td><select data-bind="options: Places, optionsText: 'ItemName', selectedOptions: selectedPlaces"  multiple="true"></select></td>
                            <td><label class="control-label">Sexs:</label></td>
                            <td><select data-bind="options: Sexs, optionsText: 'ItemName', selectedOptions: selectedSexs"  multiple="true"></select></td>
                            <td><label class="control-label">Items:</label></td>
                            <td><select data-bind="options: Items, optionsText: 'ItemName', selectedOptions: selectedItems"  multiple="true"></select></td>
                        </tr>
                        <tr>
                            <td><label class="control-label">Colors:</label></td>
                            <td><select data-bind="options: Colors, optionsText: 'ItemName', selectedOptions: selectedColors"  multiple="true"></select></td>
                            <td><label class="control-label">Styles:</label></td>
                            <td><select data-bind="options: Styles, optionsText: 'ItemName', selectedOptions: selectedStyles"  multiple="true"></select></td>
                            <td><label class="control-label">Lengths:</label></td>
                            <td><select data-bind="options: Lengths, optionsText: 'ItemName', selectedOptions: selectedLengths"  multiple="true"></select></td>
                        </tr>
                        <tr>
                            <td><label class="control-label">Collars:</label></td>
                            <td><select data-bind="options: Collars, optionsText: 'ItemName', selectedOptions: selectedCollars"  multiple="true"></select></td>
                            <td><label class="control-label">Fronts:</label></td>
                            <td><select data-bind="options: Fronts, optionsText: 'ItemName', selectedOptions: selectedFronts"  multiple="true"></select></td>
                            <td><label class="control-label">Sleeves:</label></td>
                            <td><select data-bind="options: Sleeves, optionsText: 'ItemName', selectedOptions: selectedSleeves"  multiple="true"></select></td>
                        </tr>
                        <tr>
                            <td><label class="control-label">SweaterTextures:</label></td>
                            <td><select data-bind="options: SweaterTextures, optionsText: 'ItemName', selectedOptions: selectedSweaterTextures"  multiple="true"></select></td>
                            <td><label class="control-label">Types:</label></td>
                            <td><select data-bind="options: Types, optionsText: 'ItemName', selectedOptions: selectedTypes"  multiple="true"></select></td>
                        </tr>
                    </table>
                </div>
                @*<a href="#" data-bind="click: reset" class="btn">reset</a>*@
                </td>
            </tr>
            <tr>
                <td>
                    @{
                        if (ViewData["RoleName"].ToString().ToLower() == PicStore.Model.RoleEnum.Manager.ToString().ToLower()
                            || ViewData["RoleName"].ToString().ToLower() == PicStore.Model.RoleEnum.Admin.ToString().ToLower())
                        {
                            // 仅限于管理员可以下载。
                            <span class="pull-left" data-bind="visible: showDownload">
                                <a href="#" data-bind="click: downLoadExcel" class="btn btn-primary">DownLoad Excel</a>
                                <input type="checkbox" data-bind="checked: needDownloadPicture"/>Download Picture as Well
                            </span>
                            <img data-bind="visible: showProgressIcon" src="~/Images/ajax-loader.gif" height="25px" width="25px" />
                            <a data-bind="visible: showResult, attr: { href: path }">Click this to Download</a>
                            <label data-bind="visible: showErrorMessage, text: errorMessage"></label>
                        }
                    }
                </td>
            </tr>
        </table>
        
    </fieldset>
</div>
<br />
<label id="labelError" class="error"></label>
<table class="table table-striped table-bordered table-condensed">
    <thead>
        <tr data-bind="foreach: headers">
            <th data-bind="style: {width: width}">
                <a href="#" data-bind="text: displayText, click: $root.sort"></a>
                <i class="icon-circle-arrow-up" data-bind="visible: value == $root.orderBy() && canOrder == 'true' && $root.isAsc()"></i>
                <i class="icon-circle-arrow-down" data-bind="visible: value == $root.orderBy() && canOrder == 'true' && !$root.isAsc()"></i>
            </th>
        </tr>
    </thead>
    <tbody data-bind="foreach: recordSet">
        <tr>
            @RenderBody()
            <td>
                @if (ViewData["RoleName"].ToString().ToLower() == PicStore.Model.RoleEnum.Manager.ToString().ToLower() || 
                    ViewData["RoleName"].ToString().ToLower() == PicStore.Model.RoleEnum.Admin.ToString().ToLower() ||
                    ViewData["RoleName"].ToString().ToLower() == PicStore.Model.RoleEnum.Contributer.ToString().ToLower())
                {
                <a href="#" data-bind="click: $root.onDataUpdating">Update</a>
                <br />
                <a href="#" data-bind="click: $root.onDataDeleting">Delete</a>
                <br/>
                }
                <a href="#" data-bind="click: $root.onDataView">View</a>
            </td>
        </tr>
    </tbody>
</table>

<div class="pagination pagination-centered">
    <ul data-bind="foreach: pageNumbers">
        <li data-bind="css: {selected: $index() == $root.pageIndex() - 1}">
            <a href="#" data-bind="text: $data, click: $root.turnPage"></a>
        </li>
    </ul>
</div>
<div class="modal fade hide" id="dialog" data-backdrop="static" data-bind="html:dialogContent"></div>
@RenderSection("Script")

